<!-- 可编辑表格组件 TODO -->
<template>
  <el-container>
    <el-main>
      <el-table
        :data="tableData.itemList"
        @selection-change="handleSelectionChange"
      >
        <!-- 遍历table属性 -->
        <template v-for="(item, index) in tableProp" :key="index">
          <!-- 主键列 -->
          <el-table-column v-if="item.key === 0" fixed> </el-table-column>
          <!-- 日期时间字段 -->
          <el-table-column
            v-else-if="
              item.prop.includes('date') ||
              item.prop.includes('Date') ||
              item.prop.includes('Time') ||
              item.prop.includes('time')
            "
            :prop="item.prop"
            :label="item.label"
          >
            <template #default="scope">
              <!-- 日期时间编辑状态 -->
              <el-date-picker
                v-if="editFlag.id === scope.row[0]"
                v-model="scope.row[item.prop]"
                type="datetime"
                placeholder="请选择时间范围"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
              <!-- 日期时间浏览状态 -->
              <span v-else>{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>
          <!-- 选项字段 -->
          <el-table-column
            v-else-if="item.prop.startsWith('is')"
            :prop="item.prop"
            :label="item.label"
          >
            <template #default="scope">
              <!-- 浏览状态 -->
              <el-select
                v-if="editFlag.id === scope.row[0]"
                v-model="scope.row[item.prop]"
                :placeholder="'请选择' + scope.row[item.label]"
                clearable
              >
                <el-option :label="labels[0]" :value="0" :key="0" />
                <el-option :label="labels[1]" :value="1" :key="1" />
              </el-select>
              <!-- 编辑状态 -->
              <el-button-group v-else>
                <el-tag
                  v-if="scope.row[item.prop] == 1"
                  effect="dark"
                  type="success"
                  >{{ labels[1] }}</el-tag
                >
                <el-tag v-else effect="dark" type="warning">{{
                  labels[0]
                }}</el-tag>
              </el-button-group>
            </template>
          </el-table-column>
          <!-- 图片列 -->
          <!-- <el-table-column
            v-else-if="
              item.label.includes('Avatar') || item.label.includes('img')
            "
            :label="item.label"
          >
            <template #default="scope">
              <div
                v-if="editFlag.id === scope.row[0]"
                class="demo-image__preview"
              >
                <el-upload
                  ref="imgUpload"
                  action="/updateimg"
                  :show-file-list="false"
                  :auto-upload="false"
                  :on-change="handelSelectedIcon"
                >
                  <div v-if="imageUrl" class="avatar">
                    <img :src="imageUrl" style="height: 100%" />
                  </div>
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
              </div>
              <div v-else class="demo-image__preview">
                <el-image
                  style="width: 70px; height: 70px; border-radius: 5px"
                  :src="scope.row[item.prop]"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  show-progress
                  :initial-index="0"
                  fit="cover"
                />
              </div>
            </template>
          </el-table-column> -->
          <!-- 文本字段 -->
          <el-table-column v-else :prop="item.prop" :label="item.label">
            <template #default="scope">
              <!-- 编辑状态 -->
              <div v-if="editFlag.id === scope.row[0]">
                <!-- 数字字段 -->
                <el-input
                  v-if="
                    item.prop.includes('contact') ||
                    item.prop.includes('Score') ||
                    item.prop.includes('score')
                  "
                  v-model="scope.row[item.prop]"
                  :placeholder="scope.row[item.prop]"
                  :formatter="(value:any) => `${value}`.replace(/(?!\d)/g, '')"
                  :parser="(value:any) => value.replace(/[^\d.]/g, '')"
                />
                <!-- 筛选文本输入框字段 -->
                <el-input
                  v-else
                  v-model="scope.row[item.prop]"
                  :placeholder="scope.row[item.prop] + ''"
                />
              </div>
              <!-- 浏览状态 -->
              <span v-else>{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>
        </template>
        <!-- 需要单独配置的字段 -->

        <!-- 操作按钮列 -->
        <el-table-column fixed="right" label="操作" min-width="100px">
          <template #default="scope">
            <!-- 编辑状态 -->
            <el-button-group v-if="editFlag.id === scope.row.checkId">
              <el-button
                type="success"
                icon="edit"
                @click="getEdition(scope.row)"
                >提交</el-button
              >
              <el-button
                type="info"
                icon="delete"
                @click="cancelEdition(scope.row)"
                >取消</el-button
              >
            </el-button-group>
            <!-- 浏览状态 -->
            <el-button-group v-else>
              <el-button type="primary" icon="edit" @click="editItem(scope.row)"
                >编辑</el-button
              >
              <el-button type="danger" icon="delete" @click="getDelItem(scope.row)"
                >删除</el-button
              >
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer
      ><el-pagination
        :page-count="tableData.totalPage"
        v-model:current-page="tableData.pageNum"
        v-model:page-size="tableData.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        background
        layout="total, sizes, prev, pager, next"
        :total="tableData.totalItem"
        @change="queryReq"
    /></el-footer>
  </el-container>
</template>
<script setup lang="ts">
//查询参数
const queryArgs = ref<Record<string, any>>({});
//发送查询请求
const queryReq = () => {
  let datas = { ...queryArgs.value };
  datas["pageNum"] = tableData.value.pageNum;
  datas["pageSize"] = tableData.value.pageSize;
  return datas;
};
const labels = [{ 0: "0" }, { 1: "1" }];
//编辑按钮
const editItem = (row: any) => {
  if (editFlag.value.id !== -1) {
    if (confirm("未提交的数据将会丢失，确认继续吗？")) {
      cancelEdition(row);
    } else {
      return;
    }
  }
  editFlag.value.id = row[0];
  editTemp = {};
  tableProp.forEach((item) => {
    editTemp![item.prop] = row[item.prop];
  });
};
//编辑项的备份
let editTemp = null;
//提交表单项编辑
const getEdition = (row: any) => {
  return row;
};
//取消表单项编辑
const cancelEdition = (row: any) => {
  if (row === undefined) {
    for (let i = 0; i < tableData.value.itemList.length; i++) {
      if (tableData.value.itemList[i][0] == editFlag.value.id) {
        Object.keys(editTemp!).forEach((prop: any) => {
          tableData.value.itemList[i][prop] = editTemp![prop];
        });
        console.log(tableData.value.itemList[i]);
        break;
      }
    }
  } else {
    let props = Object.keys(editTemp!);
    props.forEach((item) => {
      row[item] = editTemp![item];
    });
  }
  editFlag.value.id = -1;
};
//当前选中行
const multiSelection = ref([]);
//获取选中行
const handleSelectionChange = (rows: any) => {
  multiSelection.value = rows;
};
let editFlag = ref({
  id: -1,
});
let tableProp = [
  { prop: "sampleId", label: "编号", key: 1 },
  { prop: "sampleName", label: "名称", key: 0 },
];
const tableData = ref<{
  itemList: Record<string, any>[];
  pageNum: number;
  pageSize: number;
  totalItem: number;
  totalPage: number;
}>({
  itemList: [],
  pageNum: 1,
  pageSize: 10,
  totalItem: 0,
  totalPage: 0,
});
// 传入表格数据
const setTableData = (
  itemList: [],
  pageNum: number,
  pageSize: number,
  totalItem: number,
  totalPage: number
) => {
  (tableData.value.itemList = itemList), (tableData.value.pageNum = pageNum);
  tableData.value.pageSize = pageSize;
  tableData.value.totalItem = totalItem;
  tableData.value.totalPage = totalPage;
};
//传入表格属性
const setTableProp = (data: []) => {
  tableProp = data;
};
//删除条目
const getDelItem = (row: any) => {
  return row[0];
};
//批量删除
const delMulti = () => {
  let arr: any = [];
  multiSelection.value.forEach((item) => {
    arr.push(item[0]);
  });
  return {
    ids: arr,
  };
};

defineExpose({});
</script>
